<template>
	<div class="w-1/2 pb-2 pl-2">
		<div class="bg-white w-full">
			<div class="bg-white w-full flex flex-col">
				<div class="pl-4 pt-4">今日考勤人数</div>
				<t-divider></t-divider>
				<div class="pl-4 pr-4 pb-4 flex-grow">
					<div class="flex flex-col">
						<!-- 下拉菜单 -->
						<t-dropdown class="ml-auto" :options="options" @click="clickHandler" :minColumnWidth="88">
							<t-button theme="default" variant="outline">{{department.content}}</t-button>
						</t-dropdown>
						<div style="height: 40vh;" class="flex items-center justify-center">
							<div class="overflow-hidden" id="AttendanceData" style="width: 100%; height: 25vh"></div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import { toDay } from '@/unit/myDate'
	import '@/unit/walden'

	export default {
		name: 'AttendanceData',
		data() {
			return {
				params: {
					day_date: '',
					department_id: 0
				},
				data: [
					{ value: 0, name: '上班' },
					{ value: 0, name: '调休' },
				],
				department: {
					content: '',
					value: ''
				}
			}
		},
		computed: {
			options() {
				let arr = [{
					content: '全公司',
					value: 0
				}]
				for(let i = 0 ; i < this.$store.state.dashboard.departmentArr.length ; i++){
					arr[i + 1] = {}
					arr[i + 1].content = this.$store.state.dashboard.departmentArr[i].department_name
					arr[i + 1].value = this.$store.state.dashboard.departmentArr[i].department_id
				}
				return arr
			}
		},
		methods: {
			// 选择框
			clickHandler(data) {
				this.department.content = data.content
				this.department.value = data.value
				this.params.department_id = data.value
				this.getAttendanceData(this.params)
			},
			// 封装发送请求，并处理成echarts可用数据
			getAttendanceData(params) {
				this.$store.dispatch('dashboard/getAttendanceData', params).then((res) => {
					if (this.params.department_id == 0){
						this.data[0].value = res.data.office_number
						this.data[1].value = res.data.rest_number
					} else {
						this.data[0].value = res.data[0].office_number
						this.data[1].value = res.data[0].rest_number
					}
					this.drawLine()
				})
			},
			// 封装渲染echarts的函数
			drawLine() {
				// 基于准备好的dom，初始化echarts实例
				let AttendanceDataChart = this.$echarts.init(document.getElementById('AttendanceData'), 'walden')
				// 绘制图表
				AttendanceDataChart.setOption({
					tooltip: {
						trigger: 'item'
					},
					legend: {
						orient: 'vertical',
						right: 10,
						top: 'center'
					},
					series: [{
						name: '今日考勤',
						type: 'pie',
						radius: ['40%', '70%'],
						avoidLabelOverlap: false,
						label: {
							show: false,
							position: 'center'
						},
						emphasis: {
							label: {
								show: true,
								fontSize: '14',
								fontWeight: 'bold'
							}
						},
						labelLine: {
							show: false
						},
						data: this.data
					}]
				});
				// 自动调整容器大小
				window.onresize = function() {
					AttendanceDataChart.resize();
				};
			}
		},
		mounted() {
			this.department.content = this.options[0].content
			this.department.value = this.options[0].value
			this.params.day_date = toDay()
			// 页面加载完发送请求
			this.getAttendanceData(this.params)
		},
	}
</script>

<style>
</style>
